React 源码解读

基础包结构

1. react

   react 基础包, 只提供定义 react 组件(ReactElement)的必要函数, 一般来说需要和渲染器(react-dom,react-native)一同使用. 在编写react应用的代码时, 大部分都是调用此包的 api.

2. react-dom

   react 渲染器之一, 是 react 与 web 平台连接的桥梁(可以在浏览器和 nodejs 环境中使用), 将react-reconciler中的运行结果输出到 web 界面上. 在编写react应用的代码时,大多数场景下, 能用到此包的就是一个入口函数ReactDOM.render(<App/>, document.getElementById('root')), 其余使用的 api, 基本是react包提供的.

3. react-reconciler

   react 得以运行的核心包(综合协调react-dom,react,scheduler各包之间的调用与配合).
   管理 react 应用状态的输入和结果的输出. 将输入信号最终转换成输出信号传递给渲染器.

   • 接受输入(scheduleUpdateOnFiber), 将fiber树生成逻辑封装到一个回调函数中(涉及fiber树形结构, fiber.updateQueue队列, 调和算法等),
   • 把此回调函数(performSyncWorkOnRoot或performConcurrentWorkOnRoot)送入scheduler进行调度
   • scheduler会控制回调函数执行的时机, 回调函数执行完成后得到全新的 fiber 树
   • 再调用渲染器(如react-dom, react-native等)将 fiber 树形结构最终反映到界面上

4. scheduler

   调度机制的核心实现, 控制由react-reconciler送入的回调函数的执行时机, 在concurrent模式下可以实现任务分片. 在编写react应用的代码时, 同样几乎不会直接用到此包提供的 api.

   • 核心任务就是执行回调(回调函数由react-reconciler提供)
   • 通过控制回调函数的执行时机, 来达到任务分片的目的, 实现可中断渲染(concurrent模式下才有此特性)